<section class="section" id="personal_project">
    <h2 class="title-thin text-muted">个人作品</h2>
    <div class="pf-wrap">
        <div class="pf-grid">

        <div class="pf-grid-sizer"></div><!-- used for sizing -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/vueMusicPC.png' | prepend: site.baseurl }}" alt="">
                    </figure>
                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">VUE音乐播放器 - PC端</h2>
                                <p>此项目为 web 音乐播放器 App（SPA） ，包括歌曲、MV的搜索播放，评 论列表的展示，可自适应移动端和手机端，采用模块化、组件化、工程化的模式开发。</p>
                                <a href="#pf-popup-1" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="pf-popup-1" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/vueMusicPC.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">VUE音乐播放器 - PC端</h2>
                            <p class="text-muted"><strong>Vue全家桶 + ElementUI + VANT</strong></p>
                            <dl class="dl-horizontal">
                                <dt>项目源代码地址:</dt>
                                <dd><a target="_blank"  href="https://github.com/shuhongfan/vue-music-pc">源代码</a></dd>
                                <dt>Demo展示地址:</dt>
                                <dd><a target="_blank"  href="http://mlnz0x.coding-pages.com">Demo</a></dd>
                            </dl>
                            <p>此项目为 web 音乐播放器 App（SPA） ，包括歌曲、MV的搜索播放，评论列表的展示，可自适应移 动端和手机端，采用模块化、组件化、工程化的模式开发。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->

            <div class="pf-grid-item design">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/vueMusic.png' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">VUE音乐播放器 - 手机端</h2>
                                <p>此项目为 web 音乐播放器 App（SPA） ，包括歌曲、MV的搜索播放，评 论列表的展示，可自适应移动端和手机端，采用模块化、组件化、工程化的模式开发。</p>
                                <a href="#pf-popup-2" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-2" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/vueMusic.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">VUE音乐播放器 - 手机端</h2>
                            <p class="text-muted"><strong>Vue全家桶 + ElementUI + VANT</strong></p>
                            <dl class="dl-horizontal">
                                <dt>项目源代码地址:</dt>
                                <dd><a target="_blank"  href="https://github.com/shuhongfan/vue-music-vant">源代码</a></dd>
                                <dt>Demo展示地址:</dt>
                                <dd><a target="_blank"  href="http://9z0pvw.coding-pages.com">Demo</a></dd>
                            </dl>
                            <p>此项目为 web 音乐播放器 App（SPA） ，包括歌曲、MV的搜索播放，评论列表的展示，可自适应移 动端和手机端，采用模块化、组件化、工程化的模式开发。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div>

            <div class="pf-grid-item design">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/ctrip.png' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">FLEX 携程手机端首页</h2>
                                <a href="#pf-popup-5" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-5" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/ctrip.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">FLEX 携程手机端首页</h2>
                            <p class="text-muted"><strong>flex</strong></p>
                            <dl class="dl-horizontal">
                                <dt>项目源代码地址:</dt>
                                <dd><a target="_blank"  href="https://github.com/shuhongfan/flex">源代码</a></dd>
                                <dt>Demo展示地址:</dt>
                                <dd><a target="_blank"  href="https://shuhongfan.github.io/flex/">Demo</a></dd>
                            </dl>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div>

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/laravelMOOC.png' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">LEAVEL MOOC系统</h2>
                                <p>此项目为前后端分离项目；后端使用LEAVEL 制作数据后台管理页面，使用H-ui前端框架界面；结合Mysql，实现页面对数据库数据的 增删改查；前端使用BootStrap制作用户注册、视频播放页面。</p>
                                <a href="#pf-popup-3" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-3" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/laravelMOOC.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">LEAVEL MOOC系统</h2>
                            <p class="text-muted"><strong>PHP LEAVEL JQ H-UI</strong></p>
                            <dl class="dl-horizontal">
                                <dt>项目源代码地址:</dt>
                                <dd><a target="_blank"  href="https://github.com/shuhongfan/laravel-mooc">源代码</a></dd>
                            </dl>
                            <p>此项目为前后端分离项目；后端使用LEAVEL 制作数据后台管理页面，使用H-ui前端框架界面；结合Mysql，实现页面对数据库数据的 增删改查；前端使用BootStrap制作用户注册、视频播放页面。</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->

            <div class="pf-grid-item photography">
                <div class="project">
                    <figure class="portfolio-figure">
                        <img src="{{ '/styles/img/portfolio/inspurcom.png' | prepend: site.baseurl }}" alt="">
                    </figure>

                    <div class="portfolio-caption text-center">
                        <div class="valign-table">
                            <div class="valign-cell">
                                <h2 class="text-upper">Bootstrap 浪潮网首页</h2>
                                <p>此项目使用 html、css、JavaScript、swiper.js（轮播图）、bootstrap3（整体结构框架）；使用jetbrains WebStorm进行web开发和本地调试（chorme）；在PC端、PAD段、手机端自适应，使用响应式布局、flex布局</p>
                                <a href="#pf-popup-4" class="pf-btn-view btn btn-primary">详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pf-popup-4" class="pf-popup clearfix">
                    <div class="pf-popup-col1">
                        <div class="pf-popup-media" style="background-image: url({{ '/styles/img/portfolio/inspurcom.png' | prepend: site.baseurl }}); background-repeat: no-repeat;background-size: cover;">
                        </div>
                    </div><!-- .pf-popup-col1 -->

                    <div class="pf-popup-col2">
                        <div class="pf-popup-info clear-mrg">
                            <h2 class="text-upper">Bootstrap 浪潮网首页</h2>
                            <p class="text-muted"><strong>html、css、JavaScript、swiper.js（轮播图）、bootstrap3（整体结构框架）</strong></p>
                            <dl class="dl-horizontal">
                                <dt>项目源代码地址:</dt>
                                <dd><a target="_blank"  href="https://github.com/shuhongfan/inspur.com">源代码</a></dd>
                                <dt>Demo展示地址1:</dt>
                                <dd><a target="_blank"  href="http://shuhongfan.gitee.io/wtctraining01/">Demo</a></dd>
                                <dt>Demo展示地址2:</dt>
                                <dd><a target="_blank"  href="https://shuhongfan.github.io/inspur.com/index.html">Demo</a></dd>
                            </dl>
                            <p>此项目使用 html、css、JavaScript、swiper.js（轮播图）、bootstrap3（整体结构框架）；使用jetbrains WebStorm进行web开发和本地调试（chorme）；在PC端、PAD段、手机端自适应，使用响应式布局、flex布局</p>
                        </div><!-- .pf-popup-info -->

                    </div><!-- .pf-popup-col2 -->
                </div><!-- .pf-popup -->
            </div><!-- .pf-grid-item -->

        </div><!-- .pf-popup-col2 -->
            <!-- .pf-grid-item -->


        </div>
    </div>
</section><!-- .section -->
